<template>
<div class="base-table">

  <table class="table head">
    <colgroup>
      <col class="col" v-for="{ width, label } in head" :key="label" :style="{ width: width + 'px' }" />
    </colgroup>
    <thead>
      <tr class="tr">
        <th class="th" v-for="{ label } in head" :key="label">
          <div class="title">
            {{ label }}
          </div>
        </th>
      </tr>
    </thead>
  </table>

  <div class="body-wrapper">
    <!-- <VueSeamlessScroll style="height: 100%; overflow-y: clip" :data="data" v-bind="seamlessScrollOption"> -->
    <table class="table body">
      <colgroup>
        <col class="col" v-for="{ width, label } in head" :key="label" :style="{ width: width + 'px' }" />
      </colgroup>
      <tbody>
        <tr class="tr" v-for="(d, index) in data" :key="index">
          <td class="td" v-for="{ prop } in head" :key="prop">
            <template v-if="prop === 'serialNumber'">
              <div class="serial-number">
                {{ index + 1 }}
              </div>
            </template>
            <template v-else>
              <div class="content">
                {{ d[prop] }}
              </div>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- <div class="interval-row"></div> -->
    <!-- </VueSeamlessScroll> -->
  </div>

</div>
</template>

<script setup>

// import { VueSeamlessScroll } from '@meruem117/vue-seamless-scroll'

const { rowLength } = defineProps({
  rowLength: {
    type: [String, Number],
  },
  seamlessScrollOption: {
    type: Object,
    default: () => ({
      direction: 'top',
      steep: 0.1,
      distance: 20,
      // direction 	滚动的方向 	'top' | 'bottom' | 'left' | 'right' 	'top'
      // steep 	滚动的速率 	number 	0.5
      // roller 	是否可以使用滚轮滚动 	boolean 	true
      // distance 	滚轮滚动的速率 	number 	20
      // data 	接收异步数据，同步任务可不传
    }),
  },
  head: {
    type: Array,
    required: true,
  },
  data: {
    type: Array,
    required: true,
  }
})




</script>

<style lang="scss" scoped>
.base-table {
  height: 100%;
  $head-tr-height: 28px;
  $td-padding-top: 0px;
  $body-tr-height: calc($head-tr-height + $td-padding-top);
  font-family: MicrosoftYaHei;
  display: flex;
  flex-direction: column;

  .table {
    table-layout: fixed;

    &.head {
      width: 100%;

      .th {
        padding: 0;

        .title {
          height: $head-tr-height;
        }
      }
    }

    &.body {
      width: 100%;

      .td {
        padding: 0;
        height: $body-tr-height;
        padding-top: $td-padding-top;

        .serial-number {
          text-align: center;
        }

        .content {
          text-align: center;
        }
      }
    }
  }

  .body-wrapper {
    margin-top: $td-padding-top;
    --row-length: v-bind(rowLength);
    height: calc($body-tr-height * var(--row-length));
    overflow: hidden;
    scrollbar-gutter: stable;
    &:hover{
      overflow-y: auto;
    }

    .interval-row {
      height: $body-tr-height;
    }
  }
}
</style>
